import {AutoTable, i18n, Plc, PlcAddress, PlcDate, PlcInput, PlcNumber, PlcOv, PlcSelect, SelectOption} from "plain-design";
import {useTableOption} from "../../modules/plain-design/useTableOption";
import {designPage} from "@peryl/react-compose";
import {usePageService} from "../../modules/micro/usePageService";

export default designPage(() => {

  /*页面跳转控制对象*/
  const { nav } = usePageService();

  /*表格参数*/
  const option = useTableOption({
    /*请求的基础路径*/
    url: '/demo',
    /*表格高度、查询的每页数据条数根据页面高度自动计算*/
    fill: true,
    /*启用基础表格的虚拟滚动功能*/
    tableProps: { virtual: true }
  });

  /*点击行带参数跳转到指定页面*/
  const onClick = (val: any) => {
    const row = val.scope.row;
    nav.push('react-base/demo-list/detail-page', { row });
  };

  /*下拉选择列的选项*/
  const selectOptions = [
    { label: i18n.$intl('page.listPage.selectOption.customer').d('消费者'), status: 'consumer' },
    { label: i18n.$intl('page.listPage.selectOption.potential').d('潜在客户'), status: 'potential' },
    { label: i18n.$intl('page.listPage.selectOption.store').d('门店'), status: 'store' },
  ];

  const renderSelectOption = () => selectOptions.map((item) => (
    <SelectOption label={item.label} val={item.status} key={item.status}/>
  ));

  return () => (
    <AutoTable option={option}>
      <Plc title={i18n.$intl('page.listPage.field.id').d('编号')} field="id" link onClick={onClick} hideInForm/>
      <PlcDate title={i18n.$intl('page.listPage.field.createdAt').d('创建时间')} field="createdAt" hideInForm width={150} editable={false} datetime/>
      <PlcDate title={i18n.$intl('page.listPage.field.updatedAt').d('更新时间')} field="updatedAt" hideInForm width={150} editable={false} datetime/>
      <PlcDate title={i18n.$intl('page.listPage.field.dateVal').d('日期')} field="dateVal" displayFormat="YYYY年MM月DD日" overflowTooltip/>
      <PlcOv title={i18n.$intl('page.listPage.field.ovVal').d('选项值')} field="ovVal" ov="promotion"/>
      <PlcAddress
        provinceField="provinceVal"
        cityField="cityVal"
        districtField="districtVal"
      />
      <PlcNumber title={i18n.$intl('page.listPage.field.count').d('计数')} field="count" required/>
      <PlcInput title={i18n.$intl('page.listPage.field.normalText').d('文本')} field="normalText" required width={100} fixed="left" overflowTooltip/>
      <PlcNumber title={i18n.$intl('page.listPage.field.numberVal').d('数字')} field="numberVal"/>
      <PlcSelect title={i18n.$intl('page.listPage.field.selectVal').d('下拉选择')} field="selectVal">{renderSelectOption()}</PlcSelect>
    </AutoTable>
  );
});
